<template>
  <div class="place-rank">
    <div class="rank-row">
      <div class="place-name">重大隐患场所</div>
      <div class="warning-instance-num">警情异常数</div>
      <div class="sensor-num">传感器异常数</div>
      <div class="offline-num">设备离线数</div>
      <div class="other-num">其他</div>
    </div>
    <div class="rank-row" v-for="(item, index) in rankArray" :key="index">
      <div class="place-name text-overflow">{{item.name}}</div>
      <div class="warning-instance-num text-overflow">{{item.warningInstanceExceptionNum}}</div>
      <div class="sensor-num text-overflow">{{item.sensorExceptionNum}}</div>
      <div class="offline-num text-overflow">{{item.offlineNum}}</div>
      <div class="other-num text-overflow">{{item.otherNum}}</div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'PlaceRank',
    data () {
      return {
        rankArray: [
          {
            name: '盛龙广场',
            warningInstanceExceptionNum: 0,
            sensorExceptionNum: 0,
            offlineNum: 0,
            otherNum: 0,
          }, {
            name: '新加坡腾飞科汇城东楼',
            warningInstanceExceptionNum: 0,
            sensorExceptionNum: 0,
            offlineNum: 0,
            otherNum: 0,
          }, {
            name: '老三届首座',
            warningInstanceExceptionNum: 0,
            sensorExceptionNum: 0,
            offlineNum: 0,
            otherNum: 0,
          }, {
            name: '清华科技园',
            warningInstanceExceptionNum: 0,
            sensorExceptionNum: 0,
            offlineNum: 0,
            otherNum: 0,
          }, {
            name: '石油大学',
            warningInstanceExceptionNum: 0,
            sensorExceptionNum: 0,
            offlineNum: 0,
            otherNum: 0,
          }
        ]
      }
    },
    props: {
      schedule: {
        type: Number,
        default: 0
      }
    },
    watch: {
      schedule (v1, v2) {
        console.log('该更新了')
        this.refresh()
      }
    },
    methods: {
      refresh () {}
    }
  }
</script>

<style lang="scss" scoped>
  .place-rank {
    .rank-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 12px;
      color: #12CEFF;
      box-sizing: border-box;
      padding: 6px 5px;
      .text-overflow {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
      .place-name {
        width: 73px;
      }
      .warning-instance-num {
        width: 61px;
      }
      .sensor-num {
        width: 73px;
      }
      .offline-num {
        width: 61px;
      }
      .other-num {
        width: 25px;
      }
    }
    .rank-row:nth-child(odd) {
      background-color: rgba(26, 77, 159, 0.2);
    }
    .rank-row:nth-child(1) {
      color: #E78F68;
    }
  }
</style>
